<div data-controller="cart" class="h-full">
  <div class="h-full flex flex-col" id="cart-container" data-cart-target="container">
    <%== color_options_style_for_line_items(@line_items) %>
    <ul class="w-full" id="line-items">
      <%= render collection: @line_items, partial: 'spree/orders/line_item', cached: spree_storefront_base_cache_scope %>
    </ul>
    <%= render 'spree/orders/summary', order: @order %>
  </div>
  <div class="hidden absolute w-full flex justify-center" style="top: 40%;left: 0" data-cart-target="spinner">
    <span class="group-aria-[busy]:inline-flex gap-2 items-center">
      <span class="w-10 h-10 border-dotted border-[3px] inline-block rounded-full animate-[spin_2s_linear_infinite] border-current"></span>
    </span>
  </div>
</div>
